import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import postcsspxtoviewport from "postcss-px-to-viewport";
import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import legacy from "@vitejs/plugin-legacy";
import vueSetupExtend from "vite-plugin-vue-setup-extend-plus";
import { VantResolver } from "@vant/auto-import-resolver";

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      imports: ["vue", "pinia", "vue-router"],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
    vueSetupExtend(),
    legacy({
      targets: ["ie 11", "chrome 52"], //需要兼容的目标列表，可以设置多个
    }),
  ],
  server: {
    proxy: {
      // 使用 proxy 实例
      "/api": {
        target: "http://119.23.47.76:10103",
        changeOrigin: true,
      },
    },
    cors: true,
  },

  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "@img": fileURLToPath(new URL("./src/assets/images", import.meta.url)),
      "@components": fileURLToPath(
        new URL("./src/components", import.meta.url)
      ),
    },
  },
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: "px", // 要转化的单位
          viewportWidth: 375, // UI设计稿的宽度
          unitPrecision: 3, // 转换后的精度，即小数点位数
          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: [], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
          exclude: [],
          landscape: false, // 是否处理横屏情况
        }),
      ],
    },
  },
});
